<!-- 顶部栏组件 -->
<template>
	<view><!-- ${navigationinfo.allHeight} -->
		<view class="navbox flex" :class="bgImgtype?`bgImg${bgImgtype}`:''" :style="`background-size:${navigationinfo.state_width}px ${navigationinfo.allHeight}px;background-color:${!bgImgtype?bgColor:''};height:${navigationinfo.allHeight}px;width:${navigationinfo.state_width}px;`">
			<view  class="flex align_center po_rel justify_center flex1" :style="`margin-top:${navigationinfo.state_height}px; height:${navigationinfo.height}px;`" >
				<view class="iconfonts po_abs flex align_center">
					<view class="iconfont i-left" :style="`color:${teColor}`" @click="goback" v-if="pageslength>1&&isBack">
					</view>
				<!-- 	<view class="iconfont i-home f_s38 pa6 fw_bold homes" style=" border-radius: 50%" :style="`border: 2upx solid ${teColor}; color:${teColor}`" @click="gohome" v-if="pageslength==1&&isBack">
					</view> -->
				</view>
				
				<slot name="content">
				</slot>
				
				
				<view class="pa_lr30 ellipsis te_center f_s32 fw_bold" :style="`color:${teColor};`">{{titleText}}</view>
			</view>
		</view>
		<!-- 是否占位 -->
		<view v-if="filling" :style="`height:${navigationinfo.allHeight}px;`"></view>
		
	</view>
</template>

<script setup lang="ts">

	import { ref, onMounted,defineProps  } from 'vue'
	import {getnavigationinfo} from "@/utils/utils"
	defineProps({
		bgColor: { // 导航背景色
			type: String,
			default: '#FFFFFF'
		},
		bgImgtype: { // 导航背景色
			type: Number,
			default: 0
		},
		teColor: { // 标题颜色
			type: String,
			default: '#333333'
		},
		isBack: { // 返回上一页按钮
			type: Boolean,
			default: true
		},
		titleText: { // 标题文本
			type: String,
			default: ''
		},
		filling: { // 是否占位
			type: Boolean,
			default: true
		}
	})
	
	const pageslength =ref<any>(null)
	const navigationinfo= ref<any>(uni.getStorageSync('navigationinfo'))
	onMounted(() => {
		if(!uni.getStorageSync('navigationinfo')){
			getnavigationinfo()
			navigationinfo.value= {...uni.getStorageSync('navigationinfo')
			}
		}
		
		let pages = getCurrentPages();
		pageslength.value = pages.length
	})
	
	const goback = () => {
		uni.navigateBack({ delta:1 })
	}
	
	const gohome = ()=>{
		uni.reLaunch({
			url:'/pages/chat/index'
		})
	}

</script>

<style lang="scss" scoped>
	.navbox{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		background-position: bottom center;
		background-repeat: no-repeat;
	}
	.bgImg1{
		background-image: url(../static/image/navbgimg.png);
	}
	.bgImg2{
		background-image: url(../static/image/nabbgimg2.png);
	}
	.iconfonts{
		left: 26upx;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
	// .homes{
	// 	 box-shadow: 1upx 1upx 4upx 1upx rgba(0, 0, 0, 0.5);
	// }
</style>
